<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4075350" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">笔记本电脑</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">创意</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">蛋糕</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">电视</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">照相机</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1684411447062') format('woff'),
       url('iconfont.ttf?t=1684411447062') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-bijibendiannao"></span>
            <div class="name">
              笔记本电脑
            </div>
            <div class="code-name">.icon-bijibendiannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangyi"></span>
            <div class="name">
              创意
            </div>
            <div class="code-name">.icon-chuangyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dangao"></span>
            <div class="name">
              蛋糕
            </div>
            <div class="code-name">.icon-dangao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianshi"></span>
            <div class="name">
              电视
            </div>
            <div class="code-name">.icon-dianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhaoxiangji"></span>
            <div class="name">
              照相机
            </div>
            <div class="code-name">.icon-zhaoxiangji
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bijibendiannao"></use>
                </svg>
                <div class="name">笔记本电脑</div>
                <div class="code-name">#icon-bijibendiannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangyi"></use>
                </svg>
                <div class="name">创意</div>
                <div class="code-name">#icon-chuangyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dangao"></use>
                </svg>
                <div class="name">蛋糕</div>
                <div class="code-name">#icon-dangao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianshi"></use>
                </svg>
                <div class="name">电视</div>
                <div class="code-name">#icon-dianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhaoxiangji"></use>
                </svg>
                <div class="name">照相机</div>
                <div class="code-name">#icon-zhaoxiangji</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
